<div class="rg-login-wrapper">
  <div class="rg-login-card">
    <div class="rg-login-header">
      <div class="rg-login-logo">
        <i class="bi bi-shield-lock-fill"></i>
      </div>
      <h2 class="mb-1">Create New Password</h2>
      <p class="text-muted mb-0">Choose a strong, unique password</p>
    </div>

    <!-- TODO: This form is just a placeholder with no working functionality -->
    <%= form_tag "password_resets", html: { class: "needs-validation", novalidate: true } do %>
      <%= hidden_field_tag 'user', Base64.encode64(Marshal.dump(@user)) %>

      <div class="mb-3">
        <label for="password" class="form-label">New Password</label>
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-lock"></i></span>
          <%= password_field_tag :password, params[:password], {
            class: "form-control",
            id: "password",
            placeholder: "Enter new password",
            required: true,
            autofocus: true,
            minlength: 6
          } %>
        </div>
        <div class="form-text">Password must be at least 6 characters long</div>
      </div>

      <div class="mb-3">
        <label for="confirm_password" class="form-label">Confirm New Password</label>
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
          <%= password_field_tag :confirm_password, params[:confirm_password], {
            class: "form-control",
            id: "confirm_password",
            placeholder: "Re-enter new password",
            required: true
          } %>
        </div>
      </div>

      <div class="d-grid gap-2 mt-4">
        <%= submit_tag "Create New Password", class: "btn btn-primary btn-lg" %>
      </div>

      <hr class="my-4">

      <div class="text-center">
        <%= link_to login_path, class: "btn btn-outline-secondary" do %>
          <i class="bi bi-arrow-left"></i> Back to Login
        <% end %>
      </div>
    <% end %>

    <div class="mt-4 p-3 rounded" style="background: linear-gradient(135deg, rgba(6, 214, 160, 0.1), rgba(17, 138, 178, 0.1)); border: 2px solid rgba(6, 214, 160, 0.3);">
      <div class="d-flex align-items-start">
        <i class="bi bi-shield-check me-2 mt-1" style="font-size: 1.25rem; color: var(--rg-success);"></i>
        <div class="small">
          <strong class="d-block mb-1">Password Security Tips</strong>
          Use a mix of letters, numbers, and symbols. Avoid common words or personal information.
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Override main content styling for password reset page */
  .rg-main.no-sidebar {
    margin: 0;
    padding: 0;
  }
</style>
